<template>
  <div class="main">
    <p>卡片</p>
    <div class="cardBox">
      <div class="circle"></div>
      <div class="card"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
</script>
<style lang="less" scoped>
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.main {
  background-color: black;
  height: 100vh;
  .cardBox {
    position: relative;
    background-color: black;
    z-index: 10;

    width: 210px;
    height: 310px;

    margin-top: 10%;
    margin-left: 25%;
    border-radius: 5px;
    overflow: hidden;
    .circle {
      z-index: 10;
      width: 400px;
      height: 400px;
      border: 1px solid black;
      border-radius: 50%;
      position: absolute;
      top: -50px;
      left: -100px;
      transform: translate(-50%, -50%);
      content: "";
      animation: rotateAnimation 5s linear infinite;
    }
    .circle::before {
      content: "";
      position: absolute;
      top: 25%;
      left: 25%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background: linear-gradient(to bottom left, purple, blue);
      // border-radius: 50%;
      animation: rotate 1s linear infinite;
    }
    .circle::after {
      content: "";
      position: absolute;
      top: 75%;
      left: 75%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background: linear-gradient(to top right, purple, blue);
      // border-radius: 50%;
      animation: rotate 1s linear infinite;
    }
    .card {
      width: 200px;
      height: 300px;

      background-color: black;
      position: absolute;
      top: 5px;
      left: 5px;
      z-index: 999;
      border-radius: 5px;
    }
  }
}
</style>
